<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        body * {
            cursor: none;
        }

        .shapes {
            position: relative;
            height: 98vh;
            width: 980vw;
            background: #2128bd;
            overflow: hidden;
        }

        .shape {
            will-change: transform;
            position: absolute;
            border-radius: 50%;
        }

        .shape.shape-1 {
            background: #005ffe;
            width: 650px;
            height: 650px;
            margin: -325px 0 0 -325px;
        }

        .shape.shape-2 {
            background: #ffe5e3;
            width: 440px;
            height: 440px;
            margin: -220px 0 0 -220px;
        }

        .shape.shape-3 {
            background: #ffcc57;
            width: 270px;
            height: 270px;
            margin: -135px 0 0 -135px;
        }

        .content {
            top: 0;
            left: 0;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
            background: #fff;
            mix-blend-mode: screen;
        }

        h1 {
            font-size: 100px;
            color: #000;
            margin: 0;
            text-align: center;
        }

        @media (min-width: 419px) {
            h1 {
                font-size: 100px;
                font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
            }
        }

        @media (min-width: 1430px) {
            h1 {
                font-size: 200px;
            }
        }

        .cursor {
            position: fixed;
            background: #2128bd;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border-radius: 50%;
            will-change: transform;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: none;
            z-index: 10000;
        }

        ::-moz-selection {
            color: #fff;
            background: #2128bd;
        }

        ::selection {
            color: #fff;
            background: #2128bd;
        }
    </style>
</head>

<body>
    <div class="cursor"></div>
    <div class="shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
    </div>
    <div class="content">
        <h1>Hello there!</h1>
    </div>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
    <script>
        document.body.addEventListener("mousemove", evt => {
            const mouseX = evt.clientX;
            const mouseY = evt.clientY;

            gsap.set(".cursor", {
                x: mouseX,
                y: mouseY
            });


            gsap.to(".shape", {
                x: mouseX,
                y: mouseY,
                stagger: -0.1
            });

        });
    </script>
</body>

</html>